<template>
  <page-frame class="product-list">
    <tabs :list="[{name: '我的收藏', key: 0}]" />
    <!-- 产品列表 -->
    <prod-item 
      v-if="list.length"
      :list="list"
      collect-item
      @delCollect="delCollect"
      @showDialog="checkToDialog"
    />
    <no-data class="bg-white pd-btm" v-else />

    <pagination 
      class="bg-white" 
      v-model="currPage" 
      :totalSize="totalSize"
      @onChangePageIndex="changePage"
    />    

    
    <!-- 预定须知 -->
    <cate-notic
      :cate="cate"
      ref="dialog_cate"
    />
    <!-- 加价转发 -->
    <add-price
      :prod="add_prod"
      ref="dialog_price"
    />
    
    <!-- 二维码弹窗 -->
    <qrcode-d :prod="qr_prod" ref="dialog_qrcode" />
  </page-frame>
</template>
<script>

import Page from '@views_pc/components/frame'
import Tabs from "@cmpt_pc/tab"

import Pagination from "@cmpt_pc/table/pagination"
import ProdItem from '@views_pc/product/components/list-item'

import CateNotic from '@views_pc/product/components/cate-notic'
import QrcodeDialog from '@views_pc/product/components/qrcode-dialog'
import AddPrice from '@views_pc/product/components/add-price'

import NoData from "@cmpt_pc/no-data"
import {
    getCollectList,
    delCollectProd
} from '@/api/modules/product'
import { Message, MessageBox } from 'element-ui'

export default {
  name: 'collect',
  components: {
    [Page.name]: Page,
    [Tabs.name]: Tabs,
    [ProdItem.name]: ProdItem,
    [Pagination.name]: Pagination,
    [MessageBox.name]: MessageBox,
    [NoData.name]: NoData,
    [CateNotic.name]: CateNotic,
    [QrcodeDialog.name]: QrcodeDialog,
    [AddPrice.name]: AddPrice,
  },
  data() {
    return {
      currPage: 1,
      totalSize: 0,
      showNum: 3,
      list: [],
      cate: {show: false}, // 选中的套餐
      qr_prod: {show: false}, // 点击的二维码的产品
      add_prod: {show: false}, // 点击加价转发的产品
    }
  },
  watch: {
    currPage() {
      this.getList()
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getCollectList({page: this.currPage})
        .then(res => {
          if(!Object.keys(res.data).length){
            this.is_empty = true
            return 
          }
          res.data.list.forEach(item => {
            item.toggleText = '查看更多'
            item.toggleIcon = 'down'
            item.renderRows = []
            item.skus = item.skus ? item.skus : []
            if(item.skus && item.skus.length){
              item.skus.forEach((skus, index) =>{
                if(index < this.showNum){
                  item.renderRows.push(skus)
                }
              })
            }
          })
          this.list = res.data.list
          this.totalSize = res.data.total

        })
        .catch(err => {
        })
    },
    changePage(page){
      this.currPage = page
    },
    delCollect(id) {
      MessageBox.confirm('', '确定删除？', {
          customClass: 'del-confirm-box',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true}
      )
      .then(() => {

        delCollectProd([id])
          .then(res => {
            let list = []
            this.list.forEach(item => {
              if(id != item.id)list.push(item)
            })
            this.list = list;
            Message('操作成功')
          })
      })
    },
    // 点击各个弹窗
    checkToDialog(type, obj){
      switch(type) {
        case 'cate': 
          this.$refs.dialog_cate.init()
          break
        case 'qr_prod': 
          this.$refs.dialog_qrcode.init()
          break
        case 'add_prod':
          this.$refs.dialog_price.init()
          break
      }
      this[type] = obj
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .del-confirm-box {
  width: 250px!important;
}
</style>